<template>
	<sc-dialog
		v-model="visible"
		show-fullscreen
		title="奖励勋章"
		width="850px"
		@close="close"
		class="cur-dialog"
		destroy-on-close
	>
		<el-header>
			<div class="left-panel"></div>
			<div class="right-panel">
				<el-input v-model="param.key" clearable placeholder="关键字" />
				<el-button
					icon="el-icon-search"
					type="primary"
					@click="search"
				/>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable
				ref="table"
				:api-obj="apiObj"
				:column="column"
				row-key="id"
				height="400px"
				:hide-context-menu="false"
			>
				<!-- 固定列-选择列 -->
				<el-table-column fixed label="选择" align="center" width="65">
					<template #default="scope">
						<el-radio
							:label="scope.$index"
							v-model="radio"
							@change="getCurrentRow(scope.row)"
						></el-radio>
					</template>
				</el-table-column>
				<template #status="{ data }">
					<el-tag
						disable-transitions
						:type="data.status ? 'success' : 'danger'"
					>
						{{ data.status ? "正常" : "停用" }}
					</el-tag>
				</template>
				<template #img="{ data }">
					<el-avatar class="user-avatar" :src="data.img" />
				</template>
			</scTable>
		</el-main>
		<template #footer>
			<el-button @click="close">取 消</el-button>
			<el-button :loading="isSaveing" type="primary" @click="save">
				确 定
			</el-button>
		</template>
	</sc-dialog>
</template>
<script>
export default {
	emits: ["complete"],
	data() {
		return {
			isSaveing: false,
			visible: false,
			apiObj: this.$API.cmmedal.page,
			list: [],
			param: {
				key: "",
			},
			selection: [],
			column: [
				{
					label: "id",
					prop: "id",
					width: "200",
					sortable: true,
					hide: true,
				},
				{ prop: "name", label: "勋章名称", width: 200, align: "left" },
				{ prop: "img", label: "勋章图片", width: 100 },
				{
					prop: "summary",
					label: "获得条件",
					width: 200,
					align: "left",
				},
				{ prop: "createTime", label: "创建时间", width: 180 },
			],
			radio: "",
			templateSelection: null,
			community: {},
		};
	},
	mounted() {},
	methods: {
		complete() {
			this.$refs.table.refresh();
		},
		search() {
			this.$refs.table.upData(this.param);
		},
		async open(row) {
			this.community = row;
			this.visible = true;
		},
		getCurrentRow(row) {
			this.templateSelection = row;
		},
		async save() {
			if (!this.templateSelection) {
				this.$alert("请选择要奖励的勋章~", "提示", { type: "error" });
				return;
			}
			let data = {
				userId: this.community.user.id,
				medalId: this.templateSelection.id,
			};
			this.isSaveing = true;
			let res = await this.$API.cmmedaluser.add.post(data);
			this.isSaveing = false;
			if (res.code == 200) {
				this.visible = false;
				this.$message.success("奖励成功");
			} else {
				this.$alert(res.message, "提示", { type: "error" });
			}
		},
		close() {
			this.visible = false;
		},
	},
};
</script>
<style scoped>
.cur-dialog >>> .el-dialog__body {
	padding: 10px 20px;
}
.cur-dialog >>> .el-radio__label {
	display: none;
}
</style>
